<template>
  <div id="validater-page">
    <g-banner title="表单验证" des="常用的表单验证使用UI组件库封装的async-validator即可，无需自定义表单验证函数"></g-banner>
    <!-- GitHub：https://github.com/yiminghe/async-validator -->
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title pull-left">表单验证</h2>
        <div class="g-title-button pull-right">
          <el-button type="primary">保存</el-button>
          <el-button @click="handleSubmit" type="primary">提交</el-button>
          <el-button>返回</el-button>
        </div>
        <div class="clearfix"></div>
      </div>
    </a-affix>
    <div class="g-box" style="padding: 30px">
      <el-form :model="form" label-width="150px" class="g-form" :rules="formRules" ref="form">
        <div class="g-form-title">必填项</div>
        <el-form-item label="必填项" prop="required">
          <el-input v-model="form.required" placeholder="请输入必填项" class="g-input-block"></el-input>
        </el-form-item>
        <div class="g-form-title">数据类型</div>
        <el-form-item label="网址" prop="url">
          <el-input v-model="form.url" placeholder="请输入网址" class="g-input-block"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入电子邮箱" class="g-input-block"></el-input>
        </el-form-item>
        <div class="g-form-title">正规式</div>
        <el-form-item label="只含数字的字符串" prop="numberString">
          <el-input v-model="form.numberString" placeholder="请输入只含数字的字符串" class="g-input-block"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input v-model="form.phoneNumber" placeholder="请输入手机号码" class="g-input-block"></el-input>
        </el-form-item>
        <el-form-item label="IP" prop="ip">
          <el-input v-model="form.ip" placeholder="请输入IP" class="g-input-block"></el-input>
        </el-form-item>
        <div class="g-form-title">使用组件特性</div>
        <el-form-item label="端口号" prop="port">
          <el-input-number v-model="form.port" :min="0" :max="65535" placeholder="请输入端口号"></el-input-number>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getScrollingCon } from '@/util/common'
import { regexp } from '@/util/regexp'
export default {
  data() {
    return {
      form: {
        required: '', // 必填项

        url: '', // url
        email: '', // email

        numberString: '', // 只包含数字的字符串
        phoneNumber: '', // 手机号
        ip: '', // IP

        port: '', 
      },
      formRules: {
        required: [
          { required: true, message: '请输入必填项' ,trigger: 'blur' },
        ],
        url: [
          { required: true, message: '请输入字符串', trigger: 'blur' },
          { type: 'url', message: '您的输入不符合网址的规范', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { type: 'email', message: '您的输入不符合电子邮箱的规范', trigger: 'blur' },
        ],
        numberString: [
          { required: true, message: '请输入只包含数字的字符串', trigger: 'blur' },
          { pattern: regexp.regNumber, message: '您只能输入数字', trigger: 'change' },
        ],
        phoneNumber: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: regexp.regPhoneNumber, message: '您的手机号不合法', trigger: 'blur' },
        ],
        ip: [
          { required: true, message: '请输入IP地址', trigger: 'blur' },
          { pattern: regexp.regIp, message: '您的IP地址不合法', trigger: 'blur' },
        ],
      }
    }
  },
  methods: {
    getScrollingCon,
    handleSubmit() {
      console.log(this.form)
      this.$refs.form.validate((isValid) => {
        if (isValid) {
          this.$message.success('提交成功')
        } else {
          this.$message.warning('请检查表单项')
          return false
        }
      })
    },
  },
}
</script>